import React, { Component } from 'react'
import PropTypes from 'prop-types';

export class Left extends Component {
  render() {
    const { list, activeId, changeLeft } = this.props; //接收父组件传来的参数
    return (
      <div className='left'>
        {/* 插槽使用  */}
        {this.props.children[0]}
        <ul>
          { //渲染左侧内容
            list.length ? list.map(item => {
              return <li
                key={item.id}
                onClick={() => {
                  changeLeft(item.id) //点击内容切换
                }}
                className={item.id === activeId ? "on" : ""} //高亮切换
              >
                {item.title}
              </li>
            }) : "暂无数据"
          }
        </ul>
        {this.props.children[1]}

      </div>
    )
  }
}

// 数据类型校验 
Left.propTypes = {
  list: PropTypes.array,
  changeLeft: PropTypes.func.isRequired
};

// 设置默认值 
Left.defaultProps = {
  list: []
};


export default Left